<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <style>
            div{width:200px;height:200px;background-color:#ccc;display:inline-block;}
            div.c1{
                border-width:10px;    /*宽*/
                border-style:solid;   /*样式*/
                border-color:red;   /*颜色*/
            }
            div.c2{
                border:10px solid  pink;    /*简写形式*/
            }
            
            div.c3{
                border-top:10px solid red;   /*单独设置 上*/
                border-right:20px solid green;   /*单独设置 右*/
                border-bottom:30px solid blue;   /*单独设置 下*/
                border-left:40px solid purple;   /*单独设置 下*/
            }
            
            div.c4{
                border:1px solid blue;
               /* border-width:20px;        代表四个边*/
               /* border-width:10px 50px;   第一个值代表上和下   第二个值代表右和左  */ 
               /* border-width:10px 30px 60px;  第一个值:上   第二个值:右左   第三个值:下 */
               border-width:10px 30px 60px 90px;  
            }
        </style>
    </head>
    <body>
        <h2>CSS样式实例:边框属性</h2>
        <div class='c1'></div>
        <div class='c2'></div>
        <div class='c3'></div>
        <hr/>
        <div class='c4'></div>
    </body>
</html>